<script setup lang="ts">
import {inject, onMounted} from "vue";

import {IFoodListService} from "../types/IFoodListService.ts";
import FoodItem from "./FoodItem.vue";
import Cart from "./Cart.vue";
const foodListService = inject<IFoodListService>('foodListService')!
onMounted(()=>{
  console.log(foodListService.getList())
})


</script>

<template>
  <div class="wrapper">
    <!--        header部分-->
    <header>

      <p >商家信息</p>
    </header>
    <!--        商家logo部分-->
    <div class="business-logo">
      <img src="../assets/img.png">
    </div>
    <!--        商家信息部分-->
    <div class="business-info">
      <h1>心念水饺</h1>
      <p>&#165;15起送 &#165;3配送</p>
      <p>各种水饺</p>
    </div>
    <!--        食品列表部分-->
    <div class="food">
        <FoodItem v-for="item in foodListService.getList()" :key="item.id" :item="item"/>
    </div>

    <Cart/>
  </div>

</template>


<style scoped>
/*总容器*/
.wrapper{
  width: 100%;
  height: 100%;

}
/*header部分*/
.wrapper header{
  width:100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

}
.wrapper header .back{
  position: absolute;
  left:7px;
  display: flex;
  align-items: center;
  text-align: center;
}
/*商家logo部分*/
.wrapper .business-logo{
  width: 100%;
  height: 35vw;
  margin-top: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;

}

.wrapper .business-logo img{
  width: 40vw;
  height: 30vw;
  border-radius: 5px;

}

/*商家信息*/
.wrapper .business-info{
  width: 100%;
  height: 20vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper .business-info h1{
  font-size: 5vw;

}
.wrapper .business-info p{
  font-size: 3vw;
  color: #666;
  margin-top: 1vw;
}
/*食品列表*/
.wrapper .food{
  width: 100%;
  padding-bottom:14vw ;

}
.wrapper .food li{
  width:100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;

  display: flex;
  justify-content: space-between;
  align-items: center;

}


</style>